<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="btns">
        <!-- 一个按钮一个当前路由的路由地址 -->
        <!-- 自定义属性 -->
        <button data-path="/music">音乐</button>
        <button data-path="/news">电影</button>
        <button data-path="/home">娱乐</button>
    </div>
    <div id="content"></div>


    <script>
        const oContent = document.getElementById("content");
        // 一个路由一个路由表
        const routes=[
            {path:"/music" ,component:"我喜欢听妈妈的话"},
            {path:"/news" ,component:"我喜欢看霍元甲"},
            {path:"/home" ,component:"我喜欢迪丽热巴"},
     ];
    //  获取所有的按钮绑定点击事件
    const oBths= document.querySelectorAll(".btns button");
   
    oBths.forEach((item)=>{
        // 给每一个按钮绑定事件，点击以后改变地址的hash值
        // 改变地址可以留下历史记录，使用hash时因为hash地址不会刷新页面
        item.onclick = function(){
            // 使用location.hash可以改变hash地址
            location.hash= this.dataset.path;
            // console.log(1111);
        }
    });
    // 监听hash地址的改变，然后根据当前的hash地址和路由表对比，展示内容
    window.onhashchange = function(e){
        console.log(e);
        // 拿到最新的hash地址
        const newHash= e.newURL.split("#")[1];
        // 路由表判断，看哪一个路由视图符合条件，展示视图
        routes.forEach((item)=>{
            if(item.path=== newHash){
                oContent.innerHTML=item.component;
            }
        })
    }
    </script>
</body>
</html>